<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>订单列表</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main-content {
            background-color: #ffffff;
        }


        tr td a {
            margin-right: 10px;
        }


        input {
            /*text-indent: 20px;*/
            width: 200px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #525255;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        select {
            width: 173px;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #848689;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        .wrapper > table > thead > tr > th {
            height: 60px;
            text-align: center;
            vertical-align: middle;
        }

        .wrapper .table tbody tr td {
            line-height: 60px;
        }

        textarea {
            text-indent: 2px;
            padding: 5px;
        }

        textarea:focus {
            outline-style: none;
        }

        #page {
            text-align: center;
            width: 34px;
            height: 34px;
        }

        #select_pageSize {
            width: 110px;
            height: 34px;
        }

        .toPage {
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
            text-align: center;
        }

        .toPage[type=text]:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        button {
            outline: none !important;
        }

        .wrapper div {
            background-color: white;
        }

        .wrapper {
            background-color: #eee;
        }

        .main-content {
            background-color: white;
        }

        tr td a {
            margin-right: 10px;
        }

        .container .table thead tr th {
            line-height: 60px;
            text-align: center;
        }

        .container .table tbody tr td {
            line-height: 30px;
            height: 90px;
        }

        .container .table tbody tr td div {
            line-height: 30px;
            height: 90px;
        }

        i, button {
            cursor: pointer;
        }

        #page {
            text-align: center;
            width: 34px;
            height: 34px;

        }

        #select_pageSize {
            width: 110px;
            height: 34px;
        }

        #wd .bottom button {
            margin-right: 20px;
            width: 60px;
            height: 30px;
            border: none;
            color: #fff;
            border-radius: 5px;
            z-index: 5;
        }
    </style>
</head>

<body class="sticky-header">


<div class="main-content">
    <jsp:include page="../inc/left.jsp"/>
    <div class="header-section">

        <a class="toggle-btn"><i class="fa fa-bars"></i></a>

        <form class="searchform">
            <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
        </form>

        <!--notification menu start -->
        <div class="menu-right">
            <ul class="notification-menu">
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                        <i class="fa fa-tasks"></i>
                        <span class="badge">8</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-head pull-right">
                        <h5 class="title">You have 8 pending task</h5>
                        <ul class="dropdown-list">
                            <li class="notification-scroll-list notification-list ">
                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left p-r-10">
                                            <em class="fa  fa-shopping-cart noti-primary"></em>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">A new order has been placed.</h5>
                                            <p class="m-0">
                                                <small>29 min ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </a>

                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left p-r-10">
                                            <em class="fa fa-check noti-success"></em>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">Databse backup is complete</h5>
                                            <p class="m-0">
                                                <small>12 min ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </a>

                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left p-r-10">
                                            <em class="fa fa-user-plus noti-info"></em>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">New user registered</h5>
                                            <p class="m-0">
                                                <small>17 min ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </a>

                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left p-r-10">
                                            <em class="fa fa-diamond noti-danger"></em>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">Database error.</h5>
                                            <p class="m-0">
                                                <small>11 min ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </a>

                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left p-r-10">
                                            <em class="fa fa-cog noti-warning"></em>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">New settings</h5>
                                            <p class="m-0">
                                                <small>18 min ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="last"><a href="#">View all notifications</a></li>
                        </ul>
                    </div>
                </li>

                <li>
                    <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="badge">4</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-head pull-right">
                        <h5 class="title">Notifications</h5>
                        <ul class="dropdown-list normal-list">
                            <li class="message-list message-scroll-list">
                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-8.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">15 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-7.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">10 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-6.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-6.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-6.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>

                                <a href="#">
                                    <span class="photo"> <img
                                            src="${pageContext.request.contextPath}/assets/images/users/avatar-6.jpg"
                                            class="img-circle" alt="img"></span>
                                    <span class="subject">John Doe</span>
                                    <span class="message"> New tasks needs to be done</span>
                                    <span class="time">20 minutes ago</span>
                                </a>
                            </li>
                            <li class="last"><a href="#">All Messages</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <img src="${pageContext.request.contextPath}/assets/images/users/avatar-6.jpg" alt=""/>
                        John Doe
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                        <li><a href="#"> <i class="fa fa-wrench"></i> Settings </a></li>
                        <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                        <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                        <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!--notification menu end -->

    </div>

    <div class="wrapper" style="background-color: #eeeeee;width: 100%">

        <div class="page-title-box" style="background-color: #FFFFFF;">
            <h4 class="page-title">订单列表</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="orderList">订单</a>
                </li>
                <li class="active">
                    订单列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>

        <div class="container"
             style="margin-top: 20px;margin-bottom: 0px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px;background-color: #FFFFFF;">
            筛选搜索


            <form action="${pageContext.request.contextPath}/order/orderList" style="margin-top: 10px;text-indent: 2em"
                  class="form-inline" method="get">
                <label for="input1">输入搜索: </label>
                <input class="form-control" id="input1" placeholder="订单编号" name="orderSn" value="${param.orderSn}"
                       size="19">
                <label for="input2">输入搜索: </label>
                <input class="form-control" id="input2" type="date" placeholder="提交时间" name="createTime"
                       value="${param.createTime}"
                       size="19">
                <label for="input3">输入搜索: </label>
                <input class="form-control" id="input3" placeholder="收货人" name="receiverName"
                       value="${param.receiverName}"
                       size="19">
                <div style="display: inline-block;margin-left: 20px;margin-top: 20px">
                    <span>订单状态:</span>
                    <select class="form-control" style="width: 180px" name="status" id="select1">
                        <option ${param.status eq null?'selected':''} value="-1">全部</option>
                        <option ${param.status eq 0?'selected':''} value="0">待付款</option>
                        <option ${param.status eq 1?'selected':''} value="1">待发货</option>
                        <option ${param.status eq 2?'selected':''} value="2">已发货</option>
                        <option ${param.status eq 3?'selected':''} value="3">已完成</option>
                        <option ${param.status eq 4?'selected':''} value="4">已关闭</option>
                    </select>
                </div>
                <div style="display: inline-block;margin-left: 20px;margin-top: 20px">
                    <span>订单分类:</span>
                    <select class="form-control" style="width: 180px" name="orderType" id="select2">
                        <option ${param.orderType eq null?'selected':''} value="-1">全部</option>
                        <option ${param.orderType eq 0?'selected':''} value="0">正常订单</option>
                        <option ${param.orderType eq 1?'selected':''} value="1">秒杀订单</option>
                    </select>
                </div>
                <div style="display: inline-block;margin-left: 20px;margin-top: 20px">
                    <span>订单来源:</span>
                    <select class="form-control" style="width: 180px" name="sourceType" id="select3">
                        <option ${param.sourceType eq null?'selected':''} value="-1">全部</option>
                        <option ${param.sourceType eq 0?'selected':''} value="0">PC订单</option>
                        <option ${param.sourceType eq 1?'selected':''} value="1">APP订单</option>
                    </select>
                </div>
                <span class="btn btn-default" id="clear"
                      style="float: right;margin-top: -90px;margin-right: 100px;text-align: center;padding: 6px 24px 6px 0px">
                    重置
                </span>
                <button type="submit" class="btn btn-primary" style="float: right;margin-left: 5px;margin-top: -90px">
                    查询结果
                </button>
            </form>
        </div>



        <div style="margin-top: 20px">
            <table class="table table-bordered container-fluid" style="font-size: 15px">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>订单编号</th>
                    <th>提交时间</th>
                    <th>用户账号</th>
                    <th>订单金额</th>
                    <th>支付方式</th>
                    <th>订单来源</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody style="text-align: center">
                <c:forEach items="${orderList}" var="a">
                    <tr>
                        <td>${a.id}</td>
                        <td>${a.orderSn}</td>
                        <td><fmt:formatDate value="${a.createTime}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
                        <td>${a.memberUsername}</td>
                        <td>${a.totalAmount}</td>
                        <td>
                            <c:if test="${a.payType==0}">
                                未支付
                            </c:if>
                            <c:if test="${a.payType==1}">
                                支付宝
                            </c:if>
                            <c:if test="${a.payType==2}">
                                微信
                            </c:if>
                        </td>
                        <td>${a.sourceType==0?"PC订单":"APP订单"}</td>
                        <td>
                            <c:if test="${a.status==0}">
                                待付款
                            </c:if>
                            <c:if test="${a.status==1}">
                                待发货
                            </c:if>
                            <c:if test="${a.status==2}">
                                已发货
                            </c:if>
                            <c:if test="${a.status==3}">
                                已完成
                            </c:if>
                            <c:if test="${a.status==4}">
                                已关闭
                            </c:if>
                            <c:if test="${a.status==5}">
                                无效订单
                            </c:if>
                        </td>
                        <td>
                            <a class="btn btn-default" href="${pageContext.request.contextPath}/order/order">查看订单</a>
                            <a class="${a.status==4?'btn btn-danger':'btn btn-default'}"
                               onclick="updateOrder(${a.id},${a.status})">
                                <c:if test="${a.status==0}">
                                    关闭订单
                                </c:if>
                                <c:if test="${a.status==1}">
                                    订单发货
                                </c:if>
                                <c:if test="${a.status==2}">
                                    订单跟踪
                                </c:if>
                                <c:if test="${a.status==3}">
                                    订单跟踪
                                </c:if>
                                <c:if test="${a.status==4}">
                                    删除订单
                                </c:if>
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <br>
            <!--分页开始-->
            <nav aria-label="...">
                <ul class="pagination">
                    <span id="current" hidden>${pageInfo.pageNum}</span>
                    <span id="currentLimit" hidden>${pageInfo.pageSize}</span>
                    <li class="page-item disabled" style="border-color:white">
                        <span class="page-link" href="${pageContext.request.contextPath}/#">共${pageInfo.total}条数据</span>
                    </li>
                    <li style="float: left" class="page-item">
                        <select id="select_pageSize" name="pageSize" class="selectC">
                            <option value="10" ${pageInfo.pageSize==10?"selected":""}>10条/页</a></option>
                            <option value="12" ${pageInfo.pageSize==12?"selected":""}>12条/页</option>
                            <option value="14" ${pageInfo.pageSize==14?"selected":""}>14条/页</option>
                            <option value="16" ${pageInfo.pageSize==16?"selected":""}>16条/页</option>
                        </select>
                    </li>
                    <li class="page-item ${pageInfo.pageNum==1?"disabled":""}">
                        <a class="page-link" ${pageInfo.pageNum==1?"href=''":""}
                           href="${pageContext.request.contextPath}/order/orderList?pageNum=${pageInfo.prePage}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">上一页</a>
                    </li>
                    <li class="page-item ${pageInfo.pageNum==1?"active":""}">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/order/orderList?page=1&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">1</a>
                    </li>

                    <c:if test="${pageInfo.pageNum>2}">
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum>1&&pageInfo.pageNum<pageInfo.pages}">
                        <li class="page-item ${(pageInfo.pageNum>1&&pageInfo.pageNum<pageInfo.pages)?"active":""}">
                            <span class="page-link">${pageInfo.pageNum}</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum<pageInfo.pages-1}">
                        <li class="page-item disabled ">
                            <a class="page-link" href="#">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pages>1}">
                        <li class="page-item ${pageInfo.pageNum==pageInfo.pages?"active":""}">
                            <a id="cntpage" class="page-link "
                               href="${pageContext.request.contextPath}/order/orderList?pageNum=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">${pageInfo.pages}</a>
                        </li>
                    </c:if>
                    <li class="page-item ${pageInfo.isLastPage?"disabled":""} ">
                        <a class="page-link" ${pageInfo.isLastPage?"href=''":""}
                           href="${pageContext.request.contextPath}/order/orderList?pageNum=${pageInfo.nextPage}&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">下一页</a>
                    </li>

                    <li class="page-item">
                        <span class="disabled">前往</span>
                        <input id="page" type="text" class="toPage" style="float:left;" name="pageNum">
                        <span class="disabled">页</span>
                    </li>

                </ul>
            </nav>
        </div>

    </div>
</div>


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
<script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<!--End Page Level Plugin-->

<script>
    function search() {
        document.getElementById("searchForm").submit();
    }

    $("#clear").click(function () {
        $("#input1").val("");
        $("#input2").val("");
        $("#input3").val("");
        $("#select1").val("-1");
        $("#select2").val("-1");
        $("#select3").val("-1");
        reset();
    });

    function reset() {
        location.href = "${pageContext.request.contextPath}/order/orderList";
    }

    $("#select_pageSize").bind("change", function () {
        let pageSize = $("#select_pageSize").val();
        let pageNum = $("#current").text();
        let name = $("#input1").val();
        let url = $("#input2").val();
        let categoryId = $("#select1").val();
        location.href = "${pageContext.request.contextPath}/order/orderList/?pageNum=1&pageSize=" + pageSize
            + "&name=" + name + "&url=" + url + "&categoryId=" + categoryId;
    })

    $("#page").bind("change", function () {
        let pages = $("#cntpage").text();
        let pageSize = $("#select_pageSize").val();
        let name = $("#input1").val();
        let url = $("#input2").val();
        let categoryId = $("#select1").val();
        let pageNum = $("#page").val();
        console.info(pageNum);
        if (pageNum != null && pageNum != "" && pageNum <= pages) {
            location.href = "${pageContext.request.contextPath}/order/orderList/?pageNum=" + pageNum + "&pageSize=" + pageSize
                + "&name=" + name + "&url=" + url + "&categoryId=" + categoryId;
            ;
        } else {
            layer.open({
                title: "警告！！！",
                content: "不能为空或不能大于总页数！",
                area: ['300px', '160px'],
                offset: ['240px', '680px'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            })
        }
    })

    function updateOrder(id, status) {
        switch (status) {
            case 0:
                break
            case 1:
                location.href = "${pageContext.request.contextPath}/order/orderSend";
                break
            case 2:
                break
            case 3:
                break
            case 4:
                if (confirm("确定删除么？")) {
                    location.href = "${pageContext.request.contextPath}/order/deleteOrder/" + id;
                }
                break

        }
    }

</script>
</body>
</html>
